<?xml version="1.0" encoding="UTF-8"?>
<html>
 <head>
  <title>WireIt: How to use Containers</title>
  
<!-- YUI CSS -->
<link rel="stylesheet" type="text/css" href="../lib/yui/fonts/fonts-min.css" /> 
<link rel="stylesheet" type="text/css" href="../lib/yui/reset/reset-min.css" />
<link rel="stylesheet" type="text/css" href="../lib/yui/container/assets/container.css">

<!-- InputEx CSS -->
<link type='text/css' rel='stylesheet' href='../lib/inputex/css/inputEx.css' />

<!-- WireIt CSS -->
<link rel="stylesheet" type="text/css" href="../css/WireIt.css" />


<!-- YUI -->
<script type="text/javascript" src="../lib/yui/utilities/utilities.js"></script>
<script type="text/javascript" src="../lib/yui/container/container-min.js"></script>
<script type="text/javascript" src="../lib/yui/json/json-min.js"></script>

<!-- InputEx -->
<script src="../lib/inputex/js/inputex.js"  type='text/javascript'></script>
<script src="../lib/inputex/js/Field.js"  type='text/javascript'></script>
<script type="text/javascript" src="../js/util/inputex/WirableField-beta.js"></script>
<script src="../lib/inputex/js/Group.js"  type='text/javascript'></script>
<script src="../lib/inputex/js/fields/StringField.js"  type='text/javascript'></script>
<script src="../lib/inputex/js/fields/SelectField.js"  type='text/javascript'></script>
<script src="../lib/inputex/js/fields/EmailField.js"  type='text/javascript'></script>
<script src="../lib/inputex/js/fields/UrlField.js"  type='text/javascript'></script>
<script src="../lib/inputex/js/fields/ListField.js"  type='text/javascript'></script>
<script src="../lib/inputex/js/fields/CheckBox.js"  type='text/javascript'></script>

<!-- Excanvas -->
<!--[if IE]><script type="text/javascript" src="../lib/excanvas.js"></script><![endif]-->

<!-- WireIt -->
<script type="text/javascript" src="../js/WireIt.js"></script>
<script type="text/javascript" src="../js/CanvasElement.js"></script>
<script type="text/javascript" src="../js/Wire.js"></script>
<script type="text/javascript" src="../js/Terminal.js"></script>
<script type="text/javascript" src="../js/util/DD.js"></script>
<script type="text/javascript" src="../js/util/DDResize.js"></script>
<script type="text/javascript" src="../js/Container.js"></script>
<script type="text/javascript" src="../js/Layer.js"></script>
<script type="text/javascript" src="../js/util/inputex/FormContainer-beta.js"></script>
<script type="text/javascript" src="../js/ImageContainer.js"></script>



<style>
body {
	font-size: 10px;
}
div.WireIt-Container {
	width: 350px; /* Prevent the modules from scratching on the right */
}
div.WireIt-ImageContainer {
	width: auto;
}

div.WireIt-InputExTerminal {
	float: left;
	width: 21px;
	height: 21px;
	position: relative;
}
div.WireIt-InputExTerminal div.WireIt-Terminal {
	top: -3px;
	left: -7px;
}
div.inputEx-Group div.inputEx-label {
	width:100px;
}


div.Bubble div.body {
	width: 70px;
	height: 45px;
	opacity: 0.8;
	cursor: move;
}

</style>

 </head>
 <body>
	
	<script>

	YAHOO.util.Event.addListener(window, 'load', function() {
		// Required for the tooltips
		YAHOO.inputEx.spacerUrl = "../lib/inputex/images/space.gif";

		// Layer Demo
	  var demoLayer = new WireIt.Layer({layerMap: false});
		
		// You can use a global setWiring method	
		demoLayer.setWiring({
			containers: [
			
			
				// FormContainer (using inputEx)
		 		{
					position:[200,100],
					xtype: "WireIt.FormContainer",
					title: "WireIt.FormContainer demo", 
					collapsible: true,
					fields: [ 
						{type: 'select', inputParams: {label: 'Title', name: 'title', selectValues: ['Mr','Mrs','Mme'] } },
						{inputParams: {label: 'Firstname', name: 'firstname', required: true } }, 
						{inputParams: {label: 'Lastname', name: 'lastname', value:'Dupont'} }, 
						{type:'email', inputParams: {label: 'Email', name: 'email', required: true}}, 
						{type:'boolean', inputParams: {label: 'Happy to be there ?', name: 'happy'}}, 
						{type:'url', inputParams: {label: 'Website', name:'website', size: 25}} 
					],
					legend: 'Tell us about yourself...'
		 		},
		
			  // ImageContainer
				{
					position:[600,240],
					"xtype":"WireIt.ImageContainer", 
					"image": "logicGates/images/gate_and.png",
	 				"terminals": [
	 					{"name": "_INPUT1", "direction": [-1,0], "offsetPosition": [-3,2]},
	 					{"name": "_INPUT2", "direction": [-1,0], "offsetPosition": [-3,37]},
	 					{"name": "_OUTPUT", "direction": [1,0], "offsetPosition": [103,20]}
	 				]
				},
				
				// ImageContainer
				{
					position:[700,140],
					"xtype":"WireIt.ImageContainer", 
					className: "WireIt-Container WireIt-ImageContainer Bubble",
					"image": "images/bubble.png",
 					"terminals": [
							{direction: [-1,-1], offsetPosition: [-10,-10]},
							{direction: [1,-1], offsetPosition: [25,-10]},
							{direction: [-1,1], offsetPosition: [-10,25]},
							{direction: [1,1], offsetPosition: [25,25]}
					]
				}
			]
		});

	});
	</script>
 </body>
</html>